<template>
    <div class="film" v-if="film">
        <My-head :title="$route.query.name" tclass='thead'>
            <img :src="require('@/assets/back.png')" alt="" class="goback">
        </My-head>
        <div class="img-top">
            <img :src="film.poster" class="poster" alt="">
        </div>
        <div class="film-info">
        <div class="info-col">
            <h2 class="name">
            {{film.name}}
            <span class="dd">
                {{film.item.name}}
            </span>
            </h2>
            <h2 class="grade" v-if="film.grade">
            {{film.grade}}分
            </h2>
        </div>
        <div class="col">
            {{film.category}}
        </div>
        <div class="col">
            {{film.premiereAt *1000 | dateFormat('YYYY-MM-DD') }} 上映
        </div>
        <div class="col">
            <span> {{film.nation}} | {{film.runtime}} 分钟</span>
        </div>
        <!-- <div class="desc" ref="content"  >
            {{film.synopsis}}
        </div>
        <p class="check" @click="changeFlag">
            <van-icon  :name="!flag?'arrow-down':'arrow-up'" />
        </p> -->
        <div class="desc" ref="content" v-if="toggle">
            {{film.synopsis}}
        </div>
        <div class="desc" :style="{height:flag?'76px':height+'px'}">
            {{film.synopsis}}
        </div>
        <p class="check" @click="change">
            <van-icon  :name="flag?'arrow-down':'arrow-up'" />
        </p>
        </div>
        <div class="actor">
            <div class="top-title">
            <p class="top-name">演职人员</p>
            </div>
            <div class="actlist">
            <ul class="acts">
                <li v-for="(l,i) in film.actors" :key="i">
                    <div class="avatar">
                    <img :src="l.avatarAddress" class="pic" alt="">
                    </div>
                    <h2 class="name">{{l.name}}</h2>
                    <p class="role"> {{l.role}}</p>
                </li>
            </ul>
            </div>

        </div>
        <div class="goSchedule" v-shuibowen @click="gotofilmcinema">
        选座购票 
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            film: null,
            height: 0,
            flag: true,
            toggle: true 
        }
    },
    methods: {
        async getFilm() {
            let res = await this.$ajax.getMaiData({
                filmId: this.$route.params.filmId
            },{
               'X-Host': 'mall.film-ticket.film.info'
            })
            this.film = res.data.film
            this.$nextTick(() => {
                this.height = this.$refs.content.clientHeight
                this.toggle = false 
                // this.$refs.content.style.height = "76px"
                // this.flag = false
                console.log(this.height)
            })
        },
        change() {
            this.flag = !this.flag 
        },
        changeFlag() {
            this.$refs.content.style.height = this.flag ? '76px' : this.height + 'px'
            this.flag = !this.flag
            //:style="{height:flag?'38px':height+'px'}"
        },
        gotofilmcinema() {
            this.$router.push({
                name: 'film-cinemas',
                params: {
                    filmId: this.$route.params.filmId 
                }
            })
        },
    },
    mounted() {
        this.getFilm()
    }
}
</script>

<style lang="scss" scoped>
.film{
  position: relative;
  .thead{
    background: transparent !important;
    border-color:transparent !important;
  }
  .goback{
    width:30px;
    height:30px;
  }
  .img-top{
    width:100%;
    height:210px;
    overflow: hidden;
    position: relative;
    .poster{
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
  }
  .film-info{
    padding:15px;
    .info-col{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name{
          color: #191a1b;
          font-size: 18px;
          height: 24px;
          line-height: 24px;
          margin-right: 7px;
          display: flex;
          align-items: center;
          .dd{
            font-size: 9px;
            color: #fff;
            background-color: #d2d6dc;
            height: 14px;
            line-height: 14px;
            padding: 0 2px;
            border-radius: 2px;
            display: inline-block;
        }
      }
      .grade{
        text-align: right;
        color: #ffb232;
        font-size:15px;
      }
    }
    .col{
      font-size: 13px;
      color: #797d82;
      margin-top: 6px;
    }
    .desc{
      font-size: 13px;
      color: #797d82;
      margin-top: 13px;
      line-height: 19px;
      transition: all 1.2s;
      overflow: hidden;
    }
    .check{
      text-align: center;
    }
  }

  .actor{
    margin-top: 10px;
    background-color: #fff;
    .top-title{
      width: 100%;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top-name{
        font-size: 16px;
        text-align: left;
        color: #191a1b;
      }
    }

    .actlist{
      width:100%;
      overflow: hidden;
      .acts{
        display: flex;
        overflow: auto;
        li{
          width:85px;
          margin:0 6px;
          .avatar{
            width: 85px;
            height: 85px;
            background: rgb(249, 249, 249);
            opacity: 1;
            display: block;
            position: relative;
            img{
              width: 100%;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              -moz-transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              width:85px;
              height:118px;
            }
          }
          .name{
            text-align: center;
            padding-top: 4px;
            font-size: 12px;
            color: #191a1b;
            width: 85px;
            display: block;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top:18px;
          }
          .role{
            text-align: center;
            padding-top: 4px;
            font-size: 12px;
            color: #797d82;
            width: 85px;
            display: block;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .goSchedule{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 49px;
    width: 100%;
    text-align: center;
    background-color: #ff5f16;
    color: #fff;
    font-size: 16px;
    line-height: 49px;
    overflow: hidden;
  }
}
  
</style>